<template>
  <div id="detail">
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,i) in banner" :key="i">
          <img :src="item.pic" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="good-info">
      <p v-html="goodsInfo.name"></p>
      <p v-html="goodsInfo.characteristic"></p>
      <div>
        <p>低价: ￥{{goodsInfo.minPrice}}</p>
        <p>原价: ￥{{goodsInfo.originalPrice}}</p>
        <p>库存: {{goodsInfo.stores}}件</p>
      </div>
    </div>

    <!-- 商品介绍区域 -->
    <div class="good-intro">
      <van-tabs>
        <van-tab title="商品介绍">
          <!-- <p v-html="content"></p> -->
        </van-tab>
        <van-tab title="商品评价">内容 2</van-tab>
      </van-tabs>
    </div>

    <!-- 购物 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onGoShops" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/shoppingCart')" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onGoShops" />
      <van-goods-action-button type="warning" text="加入购物车" @click="onShow" />
      <van-goods-action-button type="danger" text="立即购买" @click="onShow" />
    </van-goods-action>

    <van-sku v-model="show" :sku="sku" :goods="goods" @add-cart="addCart" />
    <!-- @buy-clicked="onBuyClicked"
    @add-cart="onAddCartClicked"-->
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "",
  data() {
    return {
      cId: 0,
      banner: [],
      goodsInfo: [],
      content: [],
      show: false,
      sku: {
        tree: [
          {
            k: "颜色",
            k_s: "c1",
            v: [
              { id: 1, name: "红色" },
              { id: 2, name: "白色" },
              { id: 3, name: "骚粉色" }
            ]
          },
          {
            k: "尺码",
            k_s: "s1",
            v: [
              { id: 8, name: "L" },
              { id: 9, name: "XL" }
            ]
          }
        ],
        list: [
          {
            id: 1000,
            c1: 1,
            s1: 8,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 1,
            s1: 9,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 2,
            s1: 8,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 2,
            s1: 9,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 3,
            s1: 8,
            price: 100,
            stock_num: 100
          }
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227 // 商品总库存
      },
      goods: {
        picture: ""
      }
    };
  },
  methods: {
    //获取数据
    getDetail() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/detail",
        params: {
          id: this.cId
        }
      }).then(res => {
        console.log(res);
        this.content = res.data.content;
        this.banner = res.data.pics;
        this.goods.picture = res.data.pics[0].pic;
        this.goodsInfo = res.data.basicInfo;
        this.sku.price = res.data.basicInfo.originalPrice;
        this.sku.stock_num = res.data.basicInfo.stores;
      });
    },
    //进入店铺
    onGoShops() {
      Toast("点击按钮");
    },
    //选择规格
    onShow() {
      this.show = true;
    },
    //判断是否登录
    addCart() {
      let data = localStorage.getItem("lativ");
      if (data == null) {
        this.$toast.fail("请先登录您的账号");
        this.$router.push("/login");
        return false;
      }

      let CartList = this.$store.state.CartList;

      console.log(CartList);

      let index = CartList.findIndex(item => {
        return item.id == this.cId;
      });
      if (index > -1) {
        CartList.map(item => {
          if (item.id == this.gid) {
            item.nums++;
          }
        });
      } else {
        let obj = new Object();
        obj.id = this.cId;
        obj.name = this.goodsInfo.name;
        obj.price = this.goodsInfo.originalPrice;
        obj.img = this.goods.picture;
        obj.nums = 1;
        obj.checked = true;
        console.log(obj);
        CartList.push(obj);
      }

      this.$store.commit("addCart", CartList);

      this.$toast.success("加入购物车成功");

      // console.log(this.$store.state.CartList)

      this.skuShow = false;
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.cId = this.$route.params.id;
    this.getDetail();
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
#detail {
  width: 100%;
  .banner {
    width: 100%;
    img {
      width: 100%;
    }
  }

  .good-info {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.3rem;
    p:nth-of-type(1) {
      font-size: 0.35rem;
    }
    p:nth-of-type(2) {
      font-size: 0.25rem;
      color: gray;
      height: 0.6rem;
      line-height: 0.6rem;
    }
    div {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 0.26rem;
      p:nth-of-type(1) {
        color: #ff0000;
        width: 20%;
        font-size: 0.25rem;
      }
      p:nth-of-type(2) {
        color: #808080;
        width: 30%;
      }
      p:nth-of-type(3) {
        width: 45%;
        color: #808080;
        text-align: right;
      }
    }
  }

  .good-intro {
    width: 100%;
    margin-top: 0.25rem;
    background: #fff;
    p {
      width: 100% !important;
      margin-top: 0.2rem;
      ul {
        width: 100%;
        li {
          width: 100%;
          line-height: 0.6rem;
        }
      }
    }
    img {
      width: 100% !important;
    }
  }
}
</style>